import textColorClass from "@/assets/ts/text_color_class"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"

type OptionDefault = {
  label: string
}


interface ItemNodeProps extends OptionDefault {
  dataSource: string | number
}

interface OptionItem<T> extends OptionDefault {
  dataIndex: keyof T
}

type keys = 'a' | 'b' | 'c' | 'd' | 'e' | 'f'

type DataType<T extends string> = {
  [key in T]: string | number
}

const option: OptionItem<DataType<keys>>[] = [
  {
    label: '工业企业',
    dataIndex: 'a'
  },
  {
    label: '联网工业企业',
    dataIndex: 'b'
  },
  {
    label: '已接入专线条数',
    dataIndex: 'c'
  },
  {
    label: '规上企业',
    dataIndex: 'd'
  },
  {
    label: '上云工业企业',
    dataIndex: 'e'
  },
  {
    label: '近一年活跃工业设备',
    dataIndex: 'f'
  },

]

const data: DataType<keys> = {
  a: 12,
  b: 34,
  c: 1,
  d: 45,
  e: 2,
  f: 87
}


const ItemNode = ({ dataSource, label }: ItemNodeProps) => {
  return <div className="w-[110px] flex flex-col justify-center gap-[6px]">
    <div className={`${textColorClass.text_default} text-[12px]`}>{label}</div>
    <div className={`text-[#FFBF00] text-[18px] font-bold leading-[20px]`}>{dataSource}</div>
  </div>
}

const EnterpriseSituation = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[156px] grid grid-cols-3 gap-[15px]"
    header={
      <TitleMain title="工业互联网企业情况" />
    }
  >

    {
      option.map(({ dataIndex, ...rows }) => {
        return <ItemNode {...rows} key={dataIndex} dataSource={data[dataIndex]} />
      })
    }

  </ItemMoudle>
}

export default EnterpriseSituation